<template>
	<view class="dispatch">
		
<!-- 		<view class="msg p30">
			注：需在10分钟内完成确认；如未确认该订单将重新进行派单
		</view> -->
		<!-- #ifdef APP-PLUS -->
		<view class="cate-tab acea-row row-middle">
			<view class="item" :class="type==0?'on':''" @click="typeClick(0)">待接单</view>
			<view class="item" :class="type==1?'on':''" @click="typeClick(1)">已接单</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<view class="cate-tab acea-row" style="top: 200rpx;">
			<view class="item" :class="type==0?'on':''" @click="typeClick(0)">待接单</view>
			<view class="item" :class="type==1?'on':''" @click="typeClick(1)">已接单</view>
		</view>
		<!-- #endif -->
		
		<view class="">
			<view class="status_bar"></view>
			<view :style="{ height:sysHeight }"></view>
		</view>
		
		<view class="list">
			<block v-for="(item,index) in orderlist" :key="index">
				<view class="item bg-white">
					<view class="bor-bot p30">
						<view class="acea-row row-between-wrapper top">
							<view>预约派单</view>
							<view class="acea-row row-middle">
								<view>{{ item._status }}</view>
								<view class="iconfont icon-xiangyou ml10"></view>
							</view>
						</view>
						<view class="p20">
							<view class="acea-row row-between-wrapper">
								<view class="color333 bold fs-28">共{{ item.count }}件</view>
								<view class="color333 fs-24">包裹预估重量：{{ item.yugu_weight }}</view>
							</view>
							<view class="color999 fs-24 mt20">预估金额：{{ item.yugu_price }}</view>
							<view class="color999 fs-24 mt20">订单偏号：{{ item.order_id }}</view>
							<view class="color999 fs-24 mt20">上门时间：{{ item.yy_time }}</view>
							<view class="color999 fs-24 mt20">上门地址：{{ item.user_address }}</view>
						</view>
					</view>
					<view class="acea-row row-right p30" @click.stop="goDetails(item.id,1)" v-if="type==0">
						<!-- <view class="color999 fs-26">时间剩余：09:58:03</view> -->
						<view class="btn">点击接单</view>
					</view>
					<view class="acea-row row-right p30" @click.stop="goDetails(item.id,2)" v-else>
						<view class="btn">确认收件</view>
					</view>
				</view>
			</block>
		</view>
		<view class='loadingicon acea-row row-center-wrapper' v-if="orderlist.length>0">
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
		</view>
		
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'rpx';
	import{ 
		getChecklist
	} from '@/api/news.js'
	export default {
		data() {
			return {
				sysHeight: sysHeight,
				loadTitle: this.$t(`加载更多`),
				loading: false,
				loadend: false,
				page: 1,
				limit: 10,
				orderlist:[],
				type:0,
			};
		},
		onShow() {
			this.empty();
			this.getlist();
		},
		methods:{
			empty(){
				this.page = 1;
				this.loading = false;
				this.loadend = false;
				this.orderlist = [];
				this.loadTitle = '';
			},
			typeClick(val){
				this.type = val;
				this.empty();
				this.getlist();
			},
			getlist(){
				let that = this;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				getChecklist({
					page: that.page,
					limit: that.limit,
					type: that.type
				}).then(function(res) {
					let list = res.data.list,
						loadend = list.length < that.limit;
					that.orderlist = that.$util.SplitArray(list, that.orderlist);
					that.$set(that, 'orderlist', that.orderlist);
					that.page = that.page + 1;
					that.loading = false;
					that.loadend = loadend;
					that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
				}, function(res) {
					this.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				});
			},
			goDetails(id,type){
				uni.navigateTo({
					url: `/pages/dispatch/details?id=${id}&type=${type}`
				})
			}
		},
		onReachBottom(){
			this.getlist();
		},
	}
</script>

<style lang="scss" scoped>
	.dispatch{
		
		.msg{
			color: #F75700;
			font-size: 22rpx;
		}
		.cate-tab{
			width: 100%;
			height: 80rpx;
			background-color: #f5f5f5;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			padding: 0 30rpx;
			
			.item{
				font-size: 30rpx;
				margin-right: 50rpx;
				line-height: 60rpx;
				
				&.on{
					color: #0AD08C;
					border-bottom: 1rpx solid #0AD08C;
				}
			}
		}
		
		.list{
			
			.item{
				margin-bottom: 30rpx;
				
				.top{
					background-color: #0AD08C;
					border-radius: 10px;
					height: 96rpx;
					padding: 0 30rpx;
					color: #ffffff;
					font-size: 28rpx;
				}
				
				.btn{
					width: 244rpx;
					height: 64rpx;
					border-radius: 32rpx;
					background-color: #0AD08C;
					color: #ffffff;
					font-size: 26rpx;
					text-align: center;
					line-height: 64rpx;
				}
				
			}
			
			
		}
		
		
		
	}
</style>
